.scroll-bar {
    -fx-background-color: -df-background-light;
    &:horizontal {
        .increment-button, .decrement-button {
            -fx-padding: 0 0 10 0;
        }
    }
    &:vertical {
        -fx-pref-width: 10px;
        .increment-button, .decrement-button {
            -fx-padding: 0 10 0 0;
            // this actually sets minimum scrollbar thumb height...
            -fx-pref-width: 15px;
        }
    }
    .thumb {
        -fx-background-insets: 1px;
        -fx-background-color: -df-component-dark;
        -fx-background-radius: 2em;
        &:hover {
            -fx-background-color: -df-component-light;
        }
        &:pressed {
            -fx-background-color: -df-component-light;
        }
    }
    .increment-button, .decrement-button {
        -fx-background-color: transparent;
        -fx-background-radius: 0;
    }
    .increment-arrow, .decrement-arrow {
        -fx-shape: " ";
        -fx-padding: 0.0;
    }
}
